<!--
 * @name: hc-map
 * @author: XU>.<CHEN
 * @date: 2023-05-15 09:33
 * @description：hc-map
 * @update: 2023-05-15 09:33
 -->
<template lang="pug">
div.map_container(ref="basicMapbox" :style="mapStyle")
</template>

<script>
import {createMap} from "./js/mapMethods";

export default {
  name: "hc-map",
  data() {
    return {
      map: null,
      navigation: null
    }
  },
  props: {
    width: {
      type: String,
      default: '300'
    },
    height: {
      type: String,
      default: '300'
    },
  },
  computed: {
    mapStyle() {
      return {
        width: this.width + 'px',
        height: this.height + 'px'
      }
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      const { map, navigation } = createMap(this.$refs.basicMapbox)
      this.navigation = navigation
      this.map = map
      this.$emit('onload', map)
    }
  },
}
</script>

<style>
.mapboxgl-ctrl-bottom-left,
.mapboxgl-ctrl-bottom-right {
  display: none;
}
.mapboxgl-ctrl-icon {
  box-sizing: border-box;
}

.map_container {

}
</style>